<template>
  <div class="home">
    <el-table
      v-loading="loading"
      border
      :data="tableData"
      style="width: 100%"
      :header-cell-style="headerCellStyle"
      :row-style="rowCellItem"
      :cell-class-name="itemCellStyle"
    >
      <el-table-column label="序号" type="index" align="center" width="60" fixed>
        <template #default="scope">
          <div class="target-no">
            <div>{{ (queryParams.pageNum - 1) * queryParams.pageSize + scope.$index + 1 }}</div>
            <div v-if="scope.$index < 3" class="circle-now"></div>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="项目信息" align="center">
        <el-table-column
          prop="pjtName"
          label="项目名称"
          align="center"
          width="257"
          :show-overflow-tooltip="true"
          fixed
        />
        <el-table-column
          prop="pjtCode"
          label="项目编号"
          align="center"
          width="125"
          :show-overflow-tooltip="true"
        />
        <el-table-column
          prop="pjtLevel"
          label="项目等级"
          align="center"
          width="88"
          :show-overflow-tooltip="true"
        />
        <el-table-column
          prop="pjtManager"
          label="项目经理"
          align="center"
          width="88"
          :show-overflow-tooltip="true"
        />
        <el-table-column
          prop="projectStage"
          label="项目阶段"
          align="center"
          width="88"
          :show-overflow-tooltip="true"
        />
      </el-table-column>
      <el-table-column label="产品信息" align="center">
        <el-table-column
          prop="prodCode"
          label="产品编号"
          align="center"
          width="145"
          :show-overflow-tooltip="true"
        />
        <el-table-column
          prop="prodModel"
          label="产品型号"
          align="center"
          width="264"
          :show-overflow-tooltip="true"
        />
      </el-table-column>
      <el-table-column label="项目进度" align="center">
        <el-table-column
          prop="pjtStarttime"
          label="立项时间"
          align="center"
          width="125"
          :show-overflow-tooltip="true"
        />
        <el-table-column
          prop="weaveDesignEndtime"
          label="综合方案评审 实际完成时间"
          align="center"
          width="125"
          :show-overflow-tooltip="true"
        />
        <el-table-column
          prop="szYjPlanEnddate"
          label="试制总结暨样机鉴定 实际完成时间"
          align="center"
          width="146"
          :show-overflow-tooltip="true"
        />
        <el-table-column
          prop="preSaleActualDate"
          label="试产总结暨投产鉴定 实际完成时间"
          align="center"
          width="159"
          :show-overflow-tooltip="true"
        />
        <el-table-column
          prop="planDate"
          label="目标上市时间"
          align="center"
          width="123"
          :show-overflow-tooltip="true"
        />
        <el-table-column
          prop="planDateDur"
          label="距离目标上市时间"
          align="center"
          width="88"
          :show-overflow-tooltip="true"
        />
      </el-table-column>
      <el-table-column label="待办" align="center">
        <el-table-column label="待办任务" align="center" width="161">
          <template #default="scope">
            <div v-for="(item, index) in scope.row.todoTaskList" :key="index" class="set-col">
              <el-tooltip effect="dark" placement="bottom">
                <template #content>
                  {{ item }}
                </template>
                <span>{{ item }}</span>
              </el-tooltip>
            </div>
          </template>
        </el-table-column>
        <el-table-column align="center" width="125">
          <template #header>
            待办里程碑
            <el-tooltip class="box-item" effect="dark" placement="bottom">
              <template #content>
                里程碑计算口径：<br />
                1、GTM-背景资料收集 取立项时间 +7<br />
                2、样机需求收集 项目等级为T/I类 取试制总结暨样机鉴定实际完成时间 +7<br />
                3、样机需求收集 项目等级为II/III类 取方案设计结束时间 +7<br />
                4、提交认证申请流程 项目等级为T/I类 取试制总结暨样机鉴定实际完成时间 +7<br />
                5、提交认证申请流程 项目等级为II/III类 取方案设计结束时间 +7<br />
                6、技术资料编制 取试产总结暨投产鉴定实际完成时间 +7<br />
                7、GTM-资料完成确认 取试产总结暨投产鉴定实际完成时间 +7
              </template>
              <el-icon color="#86909C" size="13">
                <QuestionFilled />
              </el-icon>
            </el-tooltip>
          </template>
          <template #default="scope">
            <div v-for="(item, index) in scope.row.todoTaskDtList" :key="index" class="set-col">
              <el-tooltip effect="dark" placement="bottom">
                <template #content>
                  {{ item }}
                </template>
                <span>{{ item }}</span>
              </el-tooltip>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="待办倒计时" align="center" width="106">
          <template #default="scope">
            <div v-for="(item, index) in scope.row.todoTaskDtDisList" :key="index" class="set-col">
              <el-tooltip effect="dark" placement="bottom">
                <template #content>
                  {{ item }}
                </template>
                <span>{{ item }}</span>
              </el-tooltip>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="跟进人" align="center" width="125">
          <template #default="scope">
            <div v-for="(item, index) in scope.row.taskManagerList" :key="index" class="set-col">
              <el-tooltip effect="dark" placement="bottom">
                <template #content>
                  {{ item }}
                </template>
                <span>{{ item }}</span>
              </el-tooltip>
            </div>
          </template>
        </el-table-column>
      </el-table-column>
      <el-table-column label="操作" align="center" fixed="right">
        <el-table-column label="已分配" align="center" width="88" :show-overflow-tooltip="true">
          <template #default="scope">
            <div v-for="(item, index) in scope.row.allocaStaList" :key="index" class="set-col">
              <el-icon size="16" :color="item === 'Y' ? '#00B53C' : '#BFC4CF'"
                ><circle-check @click="disposeNotice(scope.row, 1, item, index)"
              /></el-icon>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="已完成" align="center" width="88" :show-overflow-tooltip="true">
          <template #default="scope">
            <div v-for="(item, index) in scope.row.completeStaList" :key="index" class="set-col">
              <el-icon size="16" :color="item === 'Y' ? '#00B53C' : '#BFC4CF'"
                ><circle-check @click="disposeNotice(scope.row, 2, item, index)"
              /></el-icon>
            </div>
          </template>
        </el-table-column>
      </el-table-column>
    </el-table>
  </div>
</template>

<script setup>
import { ref, onMounted, reactive } from 'vue'
import { QuestionFilled, CircleCheck } from '@element-plus/icons-vue'
import { baseData } from './modules/baseData'
const loading = ref(false)
const tableData = ref([])
const headerCellStyle = ref({
  backgroundColor: '#F2F3F5',
  color: '#1D2129',
  fontFamily: 'AliMedium',
  fontWeight: 500,
  fontSize: '14px',
  border: '1px solid #E5E6EB'
})
const rowCellItem = ref({
  fontSize: '14px',
  fontFamily: 'AliRegularL3',
  fontWeight: '400',
  color: '#1D2129',
  height: '44px'
})
const queryParams = reactive({
  pageNum: 1,
  pageSize: 10
})
onMounted(() => {
  tableData.value = baseData
})
const disposeNotice = (row, type, value, index) => {
  console.log(row, type, value, index)
}
// eslint-disable-next-line no-unused-vars
const itemCellStyle = ({ row, column, rowIndex, columnIndex }) => {
  const arrNames = [14, 15, 16, 17, 18, 19]
  if (arrNames.includes(columnIndex)) {
    return 'item-cell-row'
  }
  return ''
}
</script>

<style lang="scss" scoped>
.home {
  width: 1200px;
  margin: 0 auto;
}
.target-no {
  position: relative;
  width: 100%;
  height: 100%;
  .circle-now {
    position: absolute;
    left: 60%;
    top: 5%;
    height: 4px;
    width: 4px;
    background: #ed0d0d;
    border-radius: 50%;
  }
}
.set-col {
  white-space: nowrap; /* 保持文字在一行内 */
  overflow: hidden;
  text-overflow: ellipsis; /* 超出部分显示省略号 */
  border-bottom: 1px solid #e5e6eb;
  height: 44px;
  line-height: 44px;
  &:last-child {
    border-bottom: none;
  }
}
</style>
<style>
.item-cell-row {
  padding: 0 !important; /* 去掉整体 padding */
}
.item-cell-row .cell {
  padding: 0 !important;
}
</style>
